<template>
	<view class="illnessInfo-wrap" v-if="sicknessDetail">
		<!-- 头部 -->
		<view class="category-title">
			<view class="category-left" @click="chooseClass(-1)">{{ sicknessDetail.sicknessName }}</view>
			<!-- <view class="category-right">你来说,医生帮你查</view> -->
		</view>

		<view class="category-wrapper">
			<!-- 左边导航 -->
			<scroll-view show-scrollbar="false" class="left-wrapper" scroll-y>
				<view class="left-content">
					<view class="left-content-divider"><o-divider textColor="#806cff" lineColor="#806cff" v-if="dataList.length > 0">证型</o-divider></view>

					<view class="title-content" :class="activeIndex == index ? 'onSelected' : ''" v-for="(item, index) in dataList" :key="index" @click="chooseClass(index)">
						{{ item.syndromeName }}
					</view>
				</view>
			</scroll-view>

			<!-- 右边内容 -->
			<scroll-view show-scrollbar="false" class="right-wrapper" scroll-y>
				<view class="right-content">
					<view class="product-wrapper" v-if="activeIndex != -1">
						<view class="product-item">
							<u-title value="相关症状"></u-title>
							<view class="product-item-syndrome flex-row">
								<view class="syndrome-box" v-for="(item, index) in syndromeDetail.syndromeSymptomList">
									<view class="syndrome-txt">{{ item.symptomName }}</view>
									<view class="syndrome-txt" v-if="index != syndromeDetail.syndromeSymptomList.length - 1">、</view>
								</view>
							</view>
						</view>

						<view class="product-item">
							<u-title value="舌脉"></u-title>
							<view class="product-item-syndrome flex-row">
								<view class="syndrome-box" v-for="(item, index) in syndromeDetail.syndromeTongueList">
									<view
										v-if="item.pictureUrl"
										:class="['syndrome-txt', 'syndrome-active']"
										@click="gotoPopup(index, 'syndromeTongueList')"
									>
										{{ item.tongueName }}
									</view>
									<view v-if="!item.pictureUrl" class="syndrome-txt">{{ item.tongueName }}</view>
									<view class="syndrome-txt" v-if="index != syndromeDetail.syndromeTongueList.length - 1">；</view>
								</view>
							</view>
						</view>

						<view class="product-item">
							<u-title value="中成药"></u-title>
							<view class="product-item-syndrome flex-row">
								<view class="syndrome-box" v-for="(item, index) in syndromeDetail.syndromePcmList">
									<view :class="['syndrome-txt', 'syndrome-active']" @click="gotoPopup(index, 'syndromePcmList')">
										{{ item.pcmName }}
									</view>
									<view class="syndrome-txt" v-if="index != syndromeDetail.syndromePcmList.length - 1">、</view>
								</view>
							</view>
						</view>

						<view class="product-item">
							<u-title value="食疗方"></u-title>
							<view class="product-item-syndrome flex-row">
								<view class="syndrome-box" v-for="(item, index) in syndromeDetail.syndromeFoodList">
									<view :class="['syndrome-txt', 'syndrome-active']" @click="gotoPopup(index, 'syndromeFoodList')">{{ item.foodName }}</view>
									<view class="syndrome-txt" v-if="index != syndromeDetail.syndromeFoodList.length - 1">、</view>
								</view>
							</view>
						</view>
					</view>

					<view class="product-wrapper" v-else>
						<view class="product-item">
							<u-title value="概述"></u-title>
							<view class="product-item-txt">{{ sicknessDetail.intro }}</view>
						</view>

						<view class="product-item">
							<u-title value="症状"></u-title>
							<view class="product-item-txt">{{ sicknessDetail.symptoms }}</view>
						</view>

						<view class="product-item">
							<u-title value="病因"></u-title>
							<view class="product-item-txt">{{ sicknessDetail.cause }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: null,
			dataList: [],
			activeIndex: -1,
			sicknessDetail: null,
			syndromeDetail: null
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.querySyndromeList();
		this.querySicknessDetail();
	},
	onShow() {},
	methods: {
		//分类选择
		chooseClass(index) {
			if (this.activeIndex === index) {
				return;
			}
			this.activeIndex = index;
			if (index != -1) {
				let id = this.dataList[index].id;

				this.querySyndromeDetail(id);
			}
		},

		gotoPopup(index, type) {
			let data = this.syndromeDetail[type][index];
			this.gotoRouter('/pages-client/hospital/illnessPopup?data=' + JSON.stringify(data) + '&type=' + type);
		},

		//获取病症详情
		querySicknessDetail() {
			this.$api
				.querySicknessDetail({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.sicknessDetail = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//获取证型列表
		querySyndromeList() {
			this.$api
				.querySyndromeList({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.dataList = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//获取证型详情
		querySyndromeDetail(id) {
			this.$api
				.querySyndromeDetail({
					params: {
						id: id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.syndromeDetail = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		}
	}
};
</script>

<style lang="less">
.illnessInfo-wrap {
	box-sizing: border-box;
	// position: relative;
	// height: 100vh;
	width: 100%;
	.popup-content {
		background-color: #fff;
		width: 100%;
		height: 500rpx;
	}

	.category-title {
		height: 5.5vh;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		// margin-bottom: 24rpx;
		.category-left {
			width: 260rpx;
			font-size: 34rpx;
			text-align: center;
			color: #806cff;
		}
		.category-right {
			flex: 1;
			text-align: center;
			color: #806cff;
		}
	}

	.category-wrapper {
		display: flex;
		flex-direction: row;
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			display: none;
			color: transparent;
		}

		.left-wrapper {
			height: 94vh;
			width: 260rpx;
			flex: 0 0 260rpx;
			background-color: #f8f8f8;
			box-sizing: border-box;
			&::-webkit-scrollbar {
				display: none;
			}
			.left-content {
				margin-bottom: 110rpx;
				.left-content-divider {
					padding: 0 32rpx;
				}

				.title-content {
					width: 100%;
					height: 96rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					&:last-child {
						border-bottom: 0;
					}

					&.onSelected {
						background: #fff;
						// position: relative;
						color: #806cff;
					}
				}
			}
		}

		.right-wrapper {
			height: 94vh;
			flex: 1;
			background-color: #fff;
			.right-content {
				width: 100%;
				box-sizing: border-box;

				.product-wrapper {
					padding: 32rpx;

					.product-item {
						margin-bottom: 24rpx;
						.product-item-txt {
							// text-indent: 2em;
						}
						.product-item-syndrome {
							display: flex;
							flex-wrap: wrap;
							margin-top: 12rpx;
							.syndrome-box {
								display: flex;
								.syndrome-txt {
								}
								.syndrome-active {
									color: #587bde !important;
									text-decoration-color: #806cff;
									text-decoration: underline;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
